import cfg from '../../config';
import {getView} from '../../util/api';
import {loadTrainCityLib} from '../../lib/ktrainCity';
import {Slider, sliderHide, sliderShow} from '../../lib/kslider';
import {formatDate, getCurrDay, message, cityDataCache} from '../../util/aid';
import Swipe from '../../lib/kswipe';
import {getSeatParam, setHeadTrianInfo, loadJingTinInfoFun, orderTuiPiaoFun, orderGaiQianFun, queryDateFun, starDateValFun, cityViewFun, bindCityFun} from '../common';
import Dialog from '../../lib/kdialog';
const dialog = new Dialog();

const $ = require('../../lib/kdom');
let _view = require('raw-loader!./home.html'); // eslint-disable-line

/*
 * city
 * iconChage
 * starDateVal
 * startDateTxt
 * queryBtn
 * highMotor
 * userCenter
 * customerService
 * */

let fromTag = null; // 出发地 target
let toTag = null; // 目的地 target
let formData = null;
const _url = '/train/home';
let _opts = null;

export default class {
  path = '/train/home$';
  hash = '/train/home';
  title = '火车票';

  constructor(opt) {
    opt = opt || {};
    this.path = opt.path || this.path;
    this.hash = opt.hash || this.hash;
    this.title = opt.title || this.title;
  }

  // 输出视图
  view(cb) {
    if (!_view) {
      // 静态资源浏览器有缓存,增加时标,强制刷新!
      getView(`${cfg.train.view.home}?t=${(+new Date())}`, '', (rs) => {
        _view = rs;
        cb(null, _view);
      });
    } else
      cb(null, _view);
  }

  // 在已经加载的视图上操作
  bind(dv, params) {
    console.log('我是首页：', params);
    _opts = params.opts || {};

    // 当前旋转角度
    const currentDeg = 180;
    const _city = ['CQW,重庆', 'BJP,北京']; // 默认城市
    let queryDate = _opts.date;
    //轮播图
    const imgs = ['img/banner-1.jpg'];

    _opts.from = _opts.from || _city[0];
    _opts.to = _opts.to || _city[1];

    // 高铁、动车
    highMotor.checked = false;

    // 查询城市
    cityViewFun(city, _opts);

    // date
    queryDateFun(starDateVal, queryDate, () => {
      $.html(startDateTxt, getCurrDay(new Date(starDateVal.value)));
    });

    // 加载轮播图片
    swiper(imgs);

    // 倾斜的切换
    // tabSkewBind();

    // 图标旋转
    iconRotate(currentDeg);

    // 初始化地址库
    // loadTrainCityLib();

    // 选中城市
    bindCityFun(city);

    // 判断出发日期
    starDateValFun(starDateVal, startDateTxt, () => {
      queryDate = starDateVal.value;
    });

    // query
    queryBtn.onclick = () => {
      fromTag = $.qu('#city .from'); // 目的地
      toTag = $.qu('#city .to'); // 出发地
      let highMotorVal = false; // 高铁动车
      if (highMotor.checked) {
        highMotorVal = true;
      }
      formData = {
        from: fromTag.getAttribute('data-city'),
        to: toTag.getAttribute('data-city'),
        date: starDateVal.value || formatDate('yyyy-MM-dd'),
        highMotor: highMotorVal,
        url: _url
      };
      localStorage.setItem(cfg.train.queryDate, starDateVal.value);
      $.router.go('/train/list', {opts: formData}, true);
    };

    // user
    userCenter.onclick = () => {
      $.router.go('/train/user', '', true);
    };

    // customer service
    customerService.onclick = () => {
      dialog.alert({content: '<div><a href="tel:18723059501"><span class="text-disabled">投诉电话：</span>18723059501</a></div><div><a href="tel:12306"><span class="text-disabled">12306客服热线：</span>12306</a></div>'});
    };
  }

  /*bind*/
}

// 加载轮播图片
function swiper(imgs) {
  if (imgs && imgs.length > 0) {
    const w = window.innerWidth || screen.width;
    new Swipe($.id('swiper'), {
      width: w,
      height: w / cfg.app.imgWHR2,
      imgs: imgs,
      auto: 5000,
      continuous: true,
    });
  }
}
// 倾斜的切换 // data-skew // 0 单程 // 1返程
/*function tabSkewBind() {
 tabWrap.onclick = function () {
 // alert(`tabWrap has class 'active' ${$.hasClass('active')}`);
 if ($.hasClass(tabWrapSkew, 'active')) {
 $.removeClass(tabWrapSkew, 'active');
 this.setAttribute('data-skew', '0');
 } else {
 $.addClass(tabWrapSkew, 'active');
 this.setAttribute('data-skew', '1');
 }
 };
 }*/
// 图标旋转
function iconRotate(deg) {
  cityIconChage.onclick = () => {
    cityIconChage.style.transform = 'rotate(' + deg + 'deg)';
    cityIconChage.style.webkitTransform = 'rotate(' + deg + 'deg)';
    deg += 180;
    //address
    fromTag = $.qu('#city .from'); //出发地
    toTag = $.qu('#city .to'); //目的地
    if ($.hasClass(fromTag, 'exchange')) {
      $.removeClass(fromTag, 'exchange');
      $.removeClass(toTag, 'exchange');

      addressClass();
    } else {
      $.addClass(fromTag, 'exchange');
      $.addClass(toTag, 'exchange');

      addressClass();
    }
    // 选中城市
    bindCityFun(city);
  };
}

// 操作class
function addressClass() {
  $.removeClass(fromTag, 'from');
  $.removeClass(toTag, 'to');

  $.addClass(fromTag, 'to');
  $.addClass(toTag, 'from');
}


